<template>
    <el-popover placement="bottom" trigger="click" v-model="popShow" width="232" popper-class='col_pop'
        @show="showPopover">
        <span class="title">列配置</span>
        <el-checkbox-group v-model="checkList" @change="handleChange" class="table" :min="6">
            <div v-for="item in disposeGroup" :key="item.label" class="group_div">
                <el-checkbox :label="item.label" style="width:100%">{{item.name}}</el-checkbox>
                <span class="iconfont icon-row key"></span>
            </div>
        </el-checkbox-group>
        <div class="operate">
            <el-button size="mini" @click="popShow = false">取 消</el-button>
            <el-button type="primary" size="mini" @click="confirm">确 定</el-button>
        </div>
        <el-button type="primary" size="mini" icon="iconfont icon-liepeizhi" plain
            style="height:28px;line-height:10px;margin-left:10px" slot="reference">列配置
        </el-button>
    </el-popover>
</template>

<script>
    import Sortable from "sortablejs"
    export default {
        data() {
            return {
                popShow: false,
                checkList: [],
                saveSelectStatusList: [],
            }
        },
        props: {
            disposeGroup: {
                type: Array,
                default: () => []
            },
        },
        watch: {
            // 解决父组件异步获取数据子组件获取数据为undefined
            disposeGroup: {
                handler: function (disposeGroup) {
                    let filterCheckList = []
                    filterCheckList = disposeGroup.filter(i => i.state)
                    this.checkList = filterCheckList.map(i => i.label) //获取标识勾选状态的集合
                    this.saveSelectStatusList = this.checkList //保存标识勾选状态的集合
                },
                deep: true
            },
        },
        mounted() {
            this.rowDrop()
        },
        methods: {
            handleChange(checkList) {
                if (checkList.length === 6) {
                    this.utils.showMsg('非固定列数量不能少于6个!', 'error')
                }
            },
            showPopover() {
                this.checkList = this.saveSelectStatusList
            },
            confirm() {
                this.disposeGroup.forEach(i => i.state = this.checkList.includes(i.label))
                this.$emit('handleChangeDiposeGroup', this.disposeGroup)
                this.popShow = false
            },
            rowDrop() {
                const el = document.querySelector(".el-checkbox-group.table")
                const that = this
                Sortable.create(el, {
                    animation: 150,
                    handle: ".key",
                    onEnd({
                        newIndex,
                        oldIndex
                    }) {
                        /**
                         * 
                         * 在改变disposeGroup之前 存放勾选框状态
                         * 解决由于拖拽数组进行splice后会重新改变勾选框状态
                         */
                        let savePreCheckStatus = []
                        savePreCheckStatus = that.checkList
                        const currRow = that.disposeGroup.splice(oldIndex, 1)[0]
                        that.disposeGroup.splice(newIndex, 0, currRow)
                        that.disposeGroup.forEach(i => i.state = savePreCheckStatus.includes(i.label))
                        that.$emit('handleChangeDiposeGroup', that.disposeGroup)
                    }
                })
            },
        }
    }
</script>